<template>
  <el-dialog
    title="预览"
    :visible="visible"
    width="750px"
    center
    :show-close="false"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>预览</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="handleCancel"
        ></span>
      </div>
    </div>
    <el-form
      :model="form"
      ref="form"
      class="pl30 pr30"
      label-width="150px"
    >
      <el-form-item label="规则名称">
        {{ form.ruleName }}
      </el-form-item>
      <el-form-item
        v-for="(k, index) in keys"
        :key="'param'+k"
        :prop="'paramVarValue' + k"
        :label="index === 0 ? 'Param参数值' : ''"
        :rules="[
          { required: true, message: '参数值不能为空', trigger: 'change' },
        ]"
      >
        <div style="display: flex;width: calc(100% - 10px)">
          <span>{{ '（'+paramList[k].parameter+'）' }}</span>
          <el-input
            style="width: auto;flex-grow: 1;"
            :maxlength="paramList[k].startLength"
            v-model="form[`paramVarValue${k}`]"
          />
        </div>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in placeholderList"
        :key="'placeholder'+index"
        :prop="'phVarValue' + index"
        :label="index === 0 ? 'Placeholder参数值' : ''"
        :rules="[
          { required: true, message: '参数值不能为空', trigger: 'change' },
        ]"
      >
        <div style="display: flex;width: calc(100% - 10px)">
          <span>{{ '（'+item.parameter+'）' }}</span>
          <el-input
            style="width: auto;flex-grow: 1;"
            :maxlength="item.startLength"
            v-model="form[`phVarValue${index}`]"
          />
        </div>
      </el-form-item>

      <el-form-item>
        <el-button style="float: right" :loading="loading" @click="handlePreview" type="primary">预览</el-button>
      </el-form-item>
    </el-form>
    <el-card v-if="previewList.length">
      <div v-for="item in previewList" :key="item">{{ item }}</div>
    </el-card>
  </el-dialog>
</template>

<script>
import { postTechserialnumGeneratetest } from '@/apis/paas/TechSerialNumController.js'
export default {
  name: 'RulePreviewModal',
  components: {

  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {},
      previewList: [],
      sectionList: [],
      keys: []

    }
  },
  beforeCreate() {
  },
  methods: {
    open(form, sectionList) {
      this.visible = true
      this.form = { ...form }
      this.sectionList = sectionList
      this.fieldDecorator()
      // this.$nextTick(() => {
      //   this.$refs.form.clearValidate()
      // })
    },
    fieldDecorator() {
      this.keys = []
      for (let i = 0; i < this.paramList.length; i++) {
        this.keys.push(i)
      }
    },
    async handlePreview() {
      try {
        await this.$refs.form.validate()
        const arr = []
        const arrPh = []
        this.keys.forEach((key) => {
          arr.push(this.form[`paramVarValue${key}`].trim())
        })
        this.placeholderList.forEach((item, index) => {
          arrPh.push(this.form[`phVarValue${index}`].trim())
        })
        this.loading = true
        postTechserialnumGeneratetest({
          serialNumId: this.form.id,
          paramVarValues: arr,
          phVarValues: arrPh
        }).then((res) => {
          this.loading = false
          this.previewList = res
          if (Array.isArray(this.previewList) && this.previewList.length === 0) {
            this.previewList = ['暂无数据']
          }
        }).catch(() => {
          this.loading = false
        })
      } catch (error) {
        console.log(error)
      }
    },
    handleCancel() {
      this.visible = false
      this.form = {
      }
      this.previewList = []
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    }
  },
  computed: {
    paramList() {
      return this.sectionList.filter((d) => d.sectionType === 'Param')
    },
    placeholderList() {
      return this.sectionList.filter((d) => d.sectionType === 'Placeholder')
    }
  }
}
</script>

<style scoped></style>
